<template>
	<view class="u-page affirm">
		<view class="goods card">
			<view class="goods-item" v-for="(item,index) in 3">
				<view class="goods-item-left">
					<view class="goods-item-img"></view>
					<view class="goods-item-info">
						<view class="goods-item-name">
							保养机油
						</view>
						<view class="goods-item-attr">
							<view class="">
								5W 40
							</view>
							<view class="m-l-10">
								库存12桶
							</view>
						</view>
						<view class="">
							<u-text mode="price" size="14" text="728732.32" :color="$u.color.priceColor"></u-text>
						</view>
					</view>
				</view>
				<view class="goods-item-right">
					<view class="goods-item-quan">
						x2
					</view>
				</view>
			</view>
		</view>
		<view class="card list">
			<view class="">
				支付方式
			</view>
			<view class="">
				支付方式
			</view>
		</view>
		<view class="card list">
			<view class="">
				积分奖励
			</view>
			<view class="price">
				1000 <span style="font-size: 28rpx;">分</span>
			</view>
		</view>
		<view class="submit">
			<view class="price">
				<span style="font-size: 28rpx;">¥</span>17000
			</view>
			<view class="">
				<u-button @click="sumbit()" text="去支付" shape="circle" :customStyle="{margin:'30rpx 30rpx'}"
					:color="$u.color.priceColor">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			sumbit() {
				uni.navigateTo({
					url:'/pages/order/success'
				})
			}
		}
	}
</script>

<style lang="scss">
	.card {
		border-radius: $radius;
		box-shadow: $shadow;
		background: rgba(255, 255, 255, 1);
	}

	.price {
		color: $priceColor;
	}

	.list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.submit {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		min-height: 100rpx;
	}

	.affirm {
		padding-bottom: 170rpx;

		.goods {
			padding: 30rpx;
			min-height: 300rpx;

			&-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 30rpx;

				&-left {
					display: flex;
					flex-direction: row;
				}

				&-img {
					width: 150rpx;
					height: 150rpx;
					background-color: #eee;
					border-radius: $radius;
					box-shadow: $shadow;
				}

				&-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 15rpx;
					font-size: 30rpx;
				}

				&-name {
					color: #000;
					font-weight: bold;
				}

				&-attr {
					display: flex;
					flex-direction: row;
					font-size: 24rpx;
					color: $u-light-color;
				}

				&-right {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					justify-content: end;
				}

				&-quan {
					font-size: 24rpx;
					border-radius: 50%;
					border: 1rpx solid #eee;
					padding: 5rpx;
				}
			}
			
			&-item:last-child {
				margin-bottom: 0rpx;
			}
		}
	}
</style>
